<template>
  <div class="navbar">
    <div class="left" @click="change"><slot name="left">
      <img src="~assets/img/BILIBILI_LOGO.png">
    </slot></div>
    <div class="center"><slot name="center">
      <span>
        <img src="~assets/img/search.png" alt="">
      </span>
    </slot></div>
    <div class="right"><slot name="right">
      <span @click="$router.push('/userInfo')">
      <img v-if="userData.user_img!=null" :src="userData.user_img" alt="">
      <img v-else src="~assets/img/default_img.jpg" alt="">
      </span>
      <div><a href="http://d.bilibili.com/download_app.html?preUrl=http%3A%2F%2Fm.bilibili.com%2Findex.html&schema=bilibili%3A%2F%2Fhome%3Ftab_name%3D%E7%83%AD%E9%97%A8&">下载 App</a></div>
    </slot></div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
export default {
  name: "navbar",
  computed:{
    ...mapState(['userData'])
  },
  methods:{
    change(){
      if (this.$router.history.current.path!='/home'){
        this.$router.push('/home')
      }
    },
    getData(){
      this.$store.commit('getData')
    },
  },
  created() {
    this.getData()
  }
};
</script>

<style scoped>
.navbar {
  height: 12.222vw;
  background-color: white;
  display: flex;
  position: relative;
  z-index: 999999;
}
.navbar div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4.444vw;
}
.navbar .right{
    width: 100px;

  }
.left img{
  width: 15.278vw;
  padding-right: 7.778vw;
}
.right img{
  width: 6.111vw;
  border-radius: 50%;
  padding-right: 3.611vw;
}
a{
  color: white;
}
.right div{
  background-color: #fb7299;
  color: white;
  width: 18.056vw;
  height: 6.111vw;
  font-size:3.333vw;
  border-radius: 0.556vw;
  margin-right: 2.778vw;
}
.center img {
  width: 6.667vw;
  margin-top: 1.945vw;
  margin-left: 15.278vw;
}
</style>
